<template>
  <view class="container" v-show="show">
    <view class="mask" @touchmove.stop.prevent @click="close()"></view>
    <view class="content bottom-pos" :animation="animationData" @touchmove.stop.prevent>
      <view class="title">{{ title }}</view>
      <view class="line-division"></view>
      <view class="mainBox">
        <view class="flex flex-column  ">
<!--          <picker  class="picBox" mode='selector' :range="goodsList" range-key="goodsName" @change="onSelectGoods">-->
<!--            商品:{{ selectGoods.goodsName?selectGoods.goodsName:"请先选择商品" }}-->
<!--          </picker>-->
          <view class="flex flex-row">
            商品:<w-select :showName="show" filterable v-model='selectGoods' defaultValue="请选择商品" :list='goodsList' keyName='goodsName' valueName="goodsName" @change="onSelectGoods"></w-select>
          </view>
          <view class="flex flex-row mg-y-10">
            数量:<input class="ipt" v-model="selectGoods.goodsCount">
          </view>
        </view>
        <button @click="onSubmitGoods" type="primary" class="primary_btn btn_margin bottom" size="mini">确定</button>
      </view>
    </view>
  </view>
</template>

<script>
import { basGoodsListForAdd } from '@/service/api/shopping.js'
import WSelect from "@/components/w-select/w-select";

export default{
  name:'writeOff',
  components: {WSelect, Index},
  props:{
    show:{
      type: Boolean,
      default: false
    },
    title:{
      type:String,
      default: '提示'
    },

  },
  data() {
    return {
      hideModal: true, //模态框的状态  true-隐藏  false-显示
      animationData: {}, //
      val: 0,
      query:{
        type:'SALE_RETURN',
        page:1,
        size:500
      },
      goodsList:[],
      selectGoods:{
        goodsName:'',
    }}
  },
  created() {
  },
  watch:{
    show(){
      this.showModal()
    }
  },
  methods: {
    close(){
      this.$emit('close','1')
    },
    //初始化方法
    showModal(){
      if (this.goodsList.length === 0){
        basGoodsListForAdd(this.query)
            .then(res=>{this.goodsList = res.content}).catch(res=>{this.goodsList = res.content})
      }
      this.selectGoods = {}
    },
    onSelectGoods(val){
      console.log(val)
      this.selectGoods = val
    },
    onSubmitGoods(){
      try {
        this.selectGoods.imageUrl = JSON.parse(this.selectGoods.imageUrl)[0].path
      }catch (err){
        this.selectGoods.imageUrl = 'https://www.zjjqf.cn/file/static/undefined.png'
      }
      const {barcode,goodsId,goodsName,imageUrl,goodsCount
        ,goodsCode,mainUnitName,taxPrice,boxUnitCount
        ,boxUnitId,mainUnitId,mainUnitCount,taxBoxPrice } = this.selectGoods
      this.$emit('addGoods',{
        barcode,goodsId,goodsName,remark:imageUrl,
        goodsCount,goodsCode,mainUnitName,taxPrice,
        boxUnitCount,boxUnitId,mainUnitId,mainUnitCount,taxBoxPrice
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.title{
  font-size: 14px;
  // color: #FFA220;
  height: 24px;
  line-height: 24px;
  padding-left: 8px;
}
.textDec{
  padding-left: 24px;
  color: #C8C9CC;
}

.dec{
  display: flex;
  justify-content: space-between;
  background-color: #E5E5E5;
  color: black;
  padding: 0 15px;
  line-height: 30px;
  height: 30px;
  text{
    display: inline-block;
  }
}

.container{
  .mask{
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 20;
    position: fixed;
    top: 0;
    left: 0;
  }
  .content{
    margin-left: 5%;
    width: 90%;
    min-height: 520rpx;
    position: fixed;
    bottom: 900rpx;
    left: 0;
    background-color: #FFFFFF;
    z-index: 21;
    border-radius: 20rpx 20rpx 0 0;
    overflow: hidden;
  }
  /*动画前初始位置*/
  .bottom-pos {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}
.ipt{
  width: 150rpx;
  height: 20rpx;
  border-radius: 10rpx;
  border: rgba(200,200,200,0.5) solid 1px;
  text-align: center;
}
.ipt:hover{
  border: #527cde solid 1px;
}
image{
  width: 120rpx;
  height: 120rpx;
}
.bottom{
  right: 50rpx;
  bottom: 50rpx;
}
.mainBox{
  margin: 50rpx 0 0 50rpx;
}
.wih{
  height: 60rpx;
}
picker{
  view{
    border: rgb(200,200,200) solid 1px ;
  }
}
</style>
